import { StyleSheet,View,TextInput,Text,Picker,Button,Image,TouchableOpacity} from 'react-native';
import React,{useState,useEffect} from 'react'
import '../global'
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import { Fontisto } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import {UserLogin} from './TelLogin';
const Publish=({navigation})=>{
    const mode=[
                 {title:'英语',value:'english'},
                 {title:'数学',value:'math'}
               ]
    const [selectmode,setSelectMode]=useState()
    const [user,setUser]=useState(user_info)
    const [publishcontent,setPublishcontent]=useState()
    const [image, setImage] = useState(null);
    const [publishtitle,setPublishtitle]=useState()
    const pickImage = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
  
      if (!result.cancelled) {
        console.log(result.uri)
        setImage(result.uri);
        let formdata=new FormData();
        let file={uri:result.uri,type:'multipart/form-data',name:'image.png'}
        formdata.append('file',file)
        fetch('http://82.157.94.91:8000/topics/upload',{
          method:'POST',
          headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization':"Bearer "+token
         },
         body:formdata

        })
        .then(res=>res.json(),console.log(res.json()))
        .then(res=>{
        })
        .catch(err=>{
          console.log(err)
      })
      }
    };
    const publishquestion=()=>{
      console.log(user)
      fetch('http://82.157.94.91:8000/topics/',{
        method:'post',
        headers: {
           'Content-Type': 'application/json',
           'Authorization':"Bearer "+token
        },
        body:JSON.stringify({
            topic_user_id:user.id,
            topic_user_name:user.user_name,
            topic_user_avatar: user.user_avatar,
            topic_type: selectmode,
            topic_title: publishtitle,
            topic_content: publishcontent,
            topic_img: image
        })
      })
      .then(res=>res.json())
      .then(res=>{
       console.log(res)
      })
    }
    return(
        <View>
          <View>
            <View style={styles.title}> 
                <TouchableOpacity onPress={publishquestion}>
                   <Text style={styles.titletext}>发布问题</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.select}>
                <Text style={{lineHeight:pxtodpH(90),marginRight:pxtodpW(-10),color:'grey'}}>请选择板块</Text>
                <View style={styles.pickerborder}>
                   <Picker
                     style={styles.picker}
                     selectedValue={selectmode}
                     onValueChange={(modes)=>{setSelectMode(modes)}}
                   >
                     {
                         mode.map((o,index)=>{
                             return(
                                <Picker.Item  label={o.title} value={o.value}/>
                            )
                         })
                    }
                </Picker> 
                </View>
            </View>
            <View>
              <View style={styles.writestyle}>
                 <TouchableOpacity> 
                   <FontAwesome name="font" size={24} color="black" />
                 </TouchableOpacity>
                 <TouchableOpacity>
                 <AntDesign name="link" size={24} color="black" />
                 </TouchableOpacity>
                 <TouchableOpacity onPress={pickImage}>
                   <Entypo name="image" size={24} color="black" />
                 </TouchableOpacity>
                 <TouchableOpacity>
                   <Fontisto name="paragraph" size={24} color="black" />
                 </TouchableOpacity>
              </View>
              <View style={styles.write}>
                <View style={styles.writearea}>
                <TextInput 
                 placeholder='请输入标题'
                 value={publishtitle}
                 onChangeText={(text)=>{setPublishtitle(text)}}
                 style={{color:'black',borderBottomWidth:1,borderBottomColor:'grey',height:pxtodpH(70),fontSize:15}}
                />
                <TextInput 
                 placeholder='请输入内容'
                 value={publishcontent}
                 onChangeText={(text)=>{setPublishcontent(text)}}
                 style={{color:'black',marginTop:pxtodpH(20)}}
                />
                </View>
                {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
            </View>
            <TouchableOpacity onPress={publishquestion}>
                  <Text style={styles.publishbtn}>发布</Text>
                </TouchableOpacity>
            </View>
            </View>
           
        </View>   
    )
}

const styles = StyleSheet.create({
title:{
    width:pxtodpW(750),
    height:pxtodpH(70),
    backgroundColor:'dodgerblue',
},
titletext:{
    textAlign:'center',
    lineHeight:pxtodpH(70),
    fontSize:20,
    color:'black'
},
select:{
    width:pxtodpW(750),
    height:pxtodpH(100),
    display:'flex',
    flexDirection:'row',
    justifyContent:"space-around",
    marginRight:pxtodpW(10)
},
pickerborder:{
    width:pxtodpW(300),
    height:pxtodpH(70),
    borderWidth:1,
    borderRadius:10,
    borderColor:'black',
    marginTop:pxtodpH(10)
},
picker:{
    width:pxtodpW(300),
    height:pxtodpH(70),
    borderColor:'black'
},
writestyle:{
  marginLeft:pxtodpW(25),
  width:pxtodpW(700),
  height:pxtodpH(80),
  borderWidth:1, 
  borderColor:'black',
  display:'flex',
  flexDirection:'row',
  justifyContent:"space-around",
  alignItems:'center',
  borderTopLeftRadius:13,
  borderTopRightRadius:13
},
write:{
  marginLeft:pxtodpW(25),
  width:pxtodpW(700),
  height:pxtodpH(900),
  borderWidth:1,
  borderColor:'black',
  borderBottomLeftRadius:13,
  borderBottomRightRadius:13
},
writearea:{
  width:pxtodpW(700),
  height:pxtodpH(500),
},
publishbtn:{
  width:pxtodpW(120),
  height:pxtodpH(60),
  backgroundColor:'dodgerblue',
  borderRadius:10,
  fontSize:15,
  fontWeight:'bold',
  textAlign:'center',
  lineHeight:pxtodpH(60),
  marginLeft:pxtodpW(575),
  marginTop:pxtodpH(10)
}
});
export default Publish

